<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <% Ajax.RenderResources<CollapsiblePanelExtender>(); %>
    <% Ajax.RenderResources<ColorPickerExtender>(); %>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="TitleContent" runat="server">
    ColorPicker Demonstration
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="demoarea">
        <div class="demoheading">
            ColorPicker Demonstration</div>
        <b>Default color picker: </b>
        <br />
        <%= Html.TextBox("Color1", null, new { maxlength = "6", autocomplete = "off" }) %>
        <% Ajax.RegisterScript(new ColorPickerExtender("Color1") { OnClientColorSelectionChanged = "colorChanged" }); %>
        <div style="font-size: 90%">
            <em>(Set the focus to the textbox to show the color picker popup; the popup dismisses
                automatically when you choose a color)</em></div>

        <script type="text/javascript">
            function colorChanged(sender) {
                sender.get_element().style.color = "#" + sender.get_selectedColor();
            }
        </script>

        <br />
        <div>
            <b>ColorPicker with an associated button and a sample control:</b><br />
            <%= Html.TextBox("Color2", null, new { maxlength = "6", autocomplete = "off", style="float:left;"})%>
            <img id="Image1" style="float: left; margin: 0 3px" src="/Content/Images/cp_button.png"
                alt="Click to show color picker" />
            <div id="Sample1" style="width: 18px; height: 18px; border: 1px solid #000; margin: 0 3px;
                float: left">
            </div>
            <br style="clear: both; float: none" />
            <div style="font-size: 90%">
                <em>(Click the image button to show the color picker; enter a valid color value in to
                    the TextBox to have a sample control show the color)</em></div>
            <% Ajax.RegisterScript(new ColorPickerExtender("Color2")
               {
                   PopupButtonID = "Image1",
                   SampleControlID = "Sample1",
                   SelectedColor = "33ffcc"
               }); %>
        </div>
    </div>
    <div class="demobottom">
    </div>
    <div id="Description_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Description_ToggleImage" src="/Content/Images/collapse.jpg" alt="collapse" />
            ColorPicker Description
        </div>
    </div>
    <div id="Description_ContentPanel" style="overflow: hidden;">
        <p>
            ColorPicker is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox
            control. It provides client-side color-picking functionality with UI in a popup
            control. You can interact with the color picker by clicking on a color to select
            the color. Optionally, a PopupButton control and a SampleControl can be provided
            which allows customizing ColorPicker's behavior.
        </p>
        <br />
        <p>
            In addition, if a custom color value is entered in a targeted TextBox then the sample
            control if it's used can demonstrate a custom color even if it's not in a color
            picker palette.
        </p>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Description_ContentPanel")
       {
           ExpandControlID = "Description_HeaderPanel",
           CollapseControlID = "Description_HeaderPanel",
           Collapsed = false,
           ImageControlID = "Description_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
    <div id="Properties_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Properties_ToggleImage" src="/Content/Images/expand.jpg" alt="expand" />
            ColorPicker Properties
        </div>
    </div>
    <div id="Properties_ContentPanel" style="overflow: hidden; height: 0px">
        <p>
            The first example of the color picker has been initialized with this code:</p>
        <pre>Ajax.RegisterScript(new ColorPickerExtender("Color1") {
    OnClientColorSelectionChanged = "colorChanged" });</pre>
        <p>
            A <em>colorChanged</em> JavaScript function has been defined as following:</p>
        <pre>function colorChanged(sender) {
  sender.get_element().style.color = 
       "#" + sender.get_selectedColor();
}</pre>
        <p>
            The color picker associated with a button has been initialized with this code. The
            properties in <em>italic</em> are optional:
        </p>
        <pre>Ajax.RegisterScript(new ColorPickerExtender("Color2") {
    <em>PopupButtonID</em>="Image1"
    <em>SampleControlID</em>="Sample1"
    <em>SelectedColor</em>="33ffcc" });</pre>
        <ul>
            <li><strong>Constructor parameter</strong> - The ID of the TextBox to extend with the
                color picker.</li>
            <li><strong>PopupButtonID</strong> - The ID of a control to show the ColorPicker popup
                when clicked. If this value is not set, the color picker will pop up when the textbox
                receives focus.</li>
            <li><strong>SampleControlID</strong> - The ID of a control to show the ColorPicker's
                selected color. If this value is set and the color picker popup is open the background
                color of the sample control will sample the hovered color. If this value is not
                set, the selected color is not shown.</li>
            <li><strong>PopupPosition</strong> - Indicates where the color picker popup should appear
                at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the
                TextBox.</li>
            <li><strong>SelectedColor</strong> - Indicates the color value the ColorPicker extender
                is initialized with.</li>
            <li><strong>OnClientColorSelectionChanged</strong> - A client JavaScript function that
                will be called when the <strong>colorSelectionChanged</strong> event is raised.</li>
        </ul>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Properties_ContentPanel")
       {
           ExpandControlID = "Properties_HeaderPanel",
           CollapseControlID = "Properties_HeaderPanel",
           Collapsed = true,
           ImageControlID = "Properties_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
    <div id="CalendarCSS_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="CalendarCSS_ToggleImage" src="/Content/Images/collapse.jpg" alt="collapse" />
            ColorPicker Theming
        </div>
    </div>
    <div id="CalendarCSS_ContentPanel" style="overflow: hidden; height: 0px;">
        It is not supported yet but will be available soon via the ColorPicker CssClass
        property. ColorPicker has a predefined set of CSS classes that can be overridden.
        It has a default style which is embedded as a WebResource and is a part of the Toolkit
        assembly that has styles set for all the sub-classes. You can find them in the Toolkit
        solution, in the <strong>"AjaxControlToolkit\ColorPicker\ColorPicker.css"</strong>
        file. If your CssClass does not provide values for any of those then it falls back
        to the default value. To customize the same the user would have to set the CssClass
        property to the name of the CSS style and define the styles for the individual classes
        so that the various elements in a ColorPicker control can be styled accordingly.
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("CalendarCSS_ContentPanel")
       {
           ExpandControlID = "CalendarCSS_HeaderPanel",
           CollapseControlID = "CalendarCSS_HeaderPanel",
           Collapsed = true,
           ImageControlID = "CalendarCSS_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
</asp:Content>
